<template>
  <div class="login-box">
    <span class="phone-login">手机号登录</span>
    <div class="error-tips">
      <span v-show="validateError" class="valid-error-tips"><i class="error-face">
        <img src="../../assets/svg/error-tips.svg" alt=""></i>
        {{str}}
      </span>
    </div>
    <input-com label="手机号" type="text" :maxLength="11" @result="phoneValue"></input-com>
    <div class="interval"></div>
    <input-com label="密码" type="password" :maxLength="20" @result="passwordVal"></input-com>
    <div class="input-block">
      <router-link to="/user/register">没有手机号?</router-link>
      <router-link to="/user/resetPassWord">忘记密码</router-link>
    </div>
    <button class="submit-btn" v-tap="{methods:login}">登录</button>
  </div>
</template>

<script>
  import inputCom from '../../components/input/input-plugin'

  export default {
    name: 'login',
    data () {
      return {
        validateError: false,
        phone: '',
        passWord: '',
        str: ''
      }
    },
    components: {
      inputCom
    },
    methods: {
      login () {
        const data = {
          phone: this.phone,
          password: this.passWord
        }
        let valData = [
          {
            regex: 'phone',
            message: '手机号码不能为空或者格式不正确',
            data: this.phone
          },
          {
            regex: 'password',
            message: '密码不能为空或者密码长度不能少于6位数字',
            data: this.passWord
          }
        ]
        let status = this.$validation(valData)
        if (status === true) {
          this.validateError = false
          this.$store.dispatch('user/login', data).then((response) => {
            if (response.code === '200') {
              if (response.data.inited) {
                this.$router.push({name: 'information'})
              } else {
                this.$store.dispatch('user/modifyLogin', data).then((response) => {
                  if (response.code === '200') {
                    this.$router.push({name: 'subscrible'})
                  }
                })
              }
            } else if (response.code === '500') {
              this.validateError = true
              this.str = response.msg
            }
          })
        } else {
          this.validateError = true
          this.str = status
        }
      },
      phoneValue (val) {
        this.phone = val
      },
      passwordVal (val) {
        this.passWord = val
      }
    }
  }
</script>

<style lang="scss">
  .login-box {
    padding: 48px;
    .phone-login {
      position: relative;
      margin-left: 32px;
      color: #33383e;
      font-size: 40px;
      &:after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 100%;
        height: 8px;
        background: #00ba91;
      }
    }
    .error-tips {
      height: 80px;
      .valid-error-tips {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #e43112;
        letter-spacing: .44px;
        .error-face {
          margin:0 12px;
        }
      }
    }
    .interval {
      width: 100%;
      height: 70px;
    }
    .input-block {
      margin: 60px 0;
      float: right;
      text-align: right;
      opacity: 0.6;
      font-size: 28px;
      color: #1b1d21;
      letter-spacing: 0.46px;
      a:first-child {
        margin-right: 20px;
      }
    }
    .submit-btn {
      background: #00ba91;
      border-radius: 8px;
      width: 100%;
      line-height: 72px;
      font-size: 40px;
      color: #ffffff;
      cursor: pointer;
      border: none;
    }
  }
</style>
